<template>
  <div class="orderCreation">
    <div class="container">
      <div class="address">
        <div class="haved" v-if="true">
          <h4>选择地址:</h4>
          <div class="address-info" :class="{more:moreShow?'more':''}">
            <div class="address-list" v-for="(item,index) in addressList">
              <span @click="checkedAddress(item.id)" :class="{check:currentId == item.id?'check':''}">{{ item.realName }}</span><span>{{ item.addressInfo }}</span> <span>{{ item.phone}}</span>
            </div>
          </div>
          <div class="more-address" @click="moreAddress">
            <span>更多地址:</span>
            <span v-if="moreShow"><el-icon><ArrowUp /></el-icon></span>
            <span v-else><el-icon><ArrowDown /></el-icon></span>
          </div>
        </div>
        <div class="none" v-else @click="addAddress">
          <el-icon><Plus /></el-icon>
        </div>
        <el-dialog v-model="dialogFormVisible" title="Shipping address" width="400px" style="border-radius: 10px;">
          <el-form :model="form" label-position="left" label-width="140px">
            <el-form-item style="margin-bottom: 18px" label="联系人:">
              <el-input placeholder="请输入信息" clearable v-model="form.name"  />
            </el-form-item>
            <el-form-item style="margin-bottom: 18px" label="联系电话:" >
              <el-input placeholder="请输入信息" v-model="form.name" />
            </el-form-item>
            <el-form-item style="margin-bottom: 18px" label="选择地址:">
              <el-cascader
                  placeholder="请选择"
                  v-model="value"
                  :options="options"
                  :props="props"
                  @change="handleChange"
              />
            </el-form-item>
            <el-form-item style="margin-bottom: 18px" label="详细地址:">
              <el-input placeholder="请输入信息" clearable v-model="form.name" />
            </el-form-item>
            <el-form-item style="margin-bottom: 18px" label="是否设为默认地址:">
              <el-switch></el-switch>
            </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button style="width: 40px" @click="dialogFormVisible = false">取消</el-button>
        <el-button style="width: 40px" type="primary" @click="dialogFormVisible = false"
        >确认</el-button
        >
      </span>
          </template>
        </el-dialog>
      </div>
      <div class="product-info">
        <table>
          <tr>
            <td>商品信息</td>
            <td>规格</td>
            <td>单价</td>
            <td>数量</td>
          </tr>
          <tr  v-for="(item,index) in 2">
            <td class="info">
              <div>
                夏日の花
              </div>
              <img style="width: 100px;height: 120px" src="http://lixinghe.meimeng.eu.org/flower/image/20141006231606_CrJmu.jpeg" alt="图片走丢了">
            </td>
            <td>盒装</td>
            <td>￥99</td>
            <td>1</td>
          </tr>
        </table>
        <el-input autosize label="备注：" placeholder="请输入商品备注" type="text"></el-input>
      </div>
      <div class="orderCreate">
        <div>
          <img src="http://lixinghe.meimeng.eu.org/flower/image/favction.jpg" alt="图片走丢了">
          <p>余额：<span>￥1818</span></p>
        </div>
        <div>
          <p>总价格: <span>￥599</span></p>
          <el-button v-throttle @click="confirmOrder" >提交订单</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";

  let moreShow = ref(false)
  const moreAddress = () => {
    moreShow.value = !moreShow.value
  }

  let addressList = reactive([
    {
      id:0,
      realName:'李星河',
      phone:'17612341234',
      addressInfo:'湖南省 长沙市 长沙县 大众传媒职业技术学院'
    },
    {
      id:1,
      realName:'李星河',
      phone:'17612341234',
      addressInfo:'湖南省 长沙市 长沙县 大众传媒职业技术学院'
    },
    {
      id:2,
      realName:'李星河',
      phone:'17612341234',
      addressInfo:'湖南省 长沙市 长沙县 大众传媒职业技术学院'
    }
  ])

  let currentId = ref(0)

  const checkedAddress = (id) => {
    currentId.value = id
  }

  // 地址弹出框
  let dialogFormVisible = ref(false)
  const formLabelWidth = '140px'

  const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })

  const addAddress = () => {
    console.log(dialogFormVisible.value);
    dialogFormVisible.value = true
  }

  //级联选择器 选择地址
  const value = ref([])

  const props = {
    expandTrigger: 'hover',
  }

  const handleChange = (value) => {
    console.log(value)
  }

  const options = [
    {
      value: '湖南省',
      label: '湖南省',
      children: [
        {
          value: '长沙市',
          label: '长沙市',
          children: [
            {
              value: '天心区',
              label: '天心区',
            },
            {
              value: '岳麓区',
              label: '岳麓区',
            },
            {
              value: '长沙县',
              label: '长沙县',
            }
          ],
        }
      ]
    }
  ]


  const confirmOrder = () => {
    ElMessage.success('请稍等！')
  }
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
  .orderCreation {
    .container {
      width: 1250px;
      border: 1px solid #c7b7b7;
      min-height: 300px;
      margin: 0 auto;
      .address {
        box-sizing: border-box;
        padding: 10px;
        .haved {
          h4 {
            font-weight: normal;
            margin: 20px 0 0 20px;
          }
          .address-info {
            margin-top: 20px;
            height: 32px;
            overflow: hidden;
            .address-list {
              height: 30px;
              font-size: 14px;
              line-height: 30px;
              span {
                display: inline-block;
                height: 100%;
                border-bottom: 1px dashed #e5813b;
              }
              span:nth-of-type(1) {
                width: 80px;
                text-align: center;
                margin:0 30px 0px 20px;
                border: 0;
              }
            }
          }
          .more-address {
            font-size: 14px;
            color: orangered;
            margin: 20px 0 0 20px;
            display: flex;
            justify-items: center;
          }
        }
        .none {
          border: 1px dashed red;
          width: 80px;
          height: 80px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 10px;
          margin: 20px;
        }
      }
      .product-info {
        margin-top: 30px;
        table {
          width: 100%;
          //border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。
          //在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。
          //合并（collapsed ）模式下，表格中相邻单元格共享边框。
          border-collapse: collapse;
          padding: 5px;
          text-align: center;
          tr {
            border-bottom: 1px solid red;
            td {

            }
            .info {
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 10px 0;
              img {
                margin-left: 20px;
              }
            }
          }
          tr:nth-of-type(1) {
            border: 1px solid #c7b7b7;
            height: 40px;
          }
        }
      }
      .orderCreate {
        padding: 10px;
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        div:nth-of-type(1) {
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
          }
          p {
            margin-top: 20px;
            span {
              font-size: 20px;
              color: red;
            }
          }
        }
        div:nth-of-type(2) {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          span {
            color: red;
            font-size: 20px;
          }
        }
      }
    }
  }
  .more {
    height: 100% !important;
  }
  .check {
    background: #ce9833;
    color: white;
    border-radius: 10px;
  }
</style>
